<script setup lang="ts">
import SearchForm from './components/SearchForm.vue'
import ViewChartLine from '@/components/view-chart-line/index.vue'

const lineOption = computed(() => {
  return {
    legend: {
      show: false,
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
          title: {
            zoom: '区域缩放',
            back: '区域缩放还原',
          },
        },
        dataView: { readOnly: false, title: '数据视图' },
        magicType: {
          type: ['line', 'bar'],
          title: {
            line: '切换为折线图',
            bar: '切换为柱状图',
          },
        },
        restore: {
          title: '还原',
        },
        saveAsImage: {
          title: '保存为图片',
        },
      },
    },
    dataZoom: [
      { type: 'slider', start: 0, end: 50 },
      { type: 'inside', start: 0, end: 50 },
    ],
  }
})
const lineDataset = computed(() => {
  return {
    source: [
      [...Array(100).fill(1).map((_v, i) => i + 1)],
      [...Array(100).fill(1).map(() => Math.floor(Math.random() * 50 + 50))],
    ],
  }
})
</script>

<template>
  <div class="padding-sm flex-direction flex container">
    <SearchForm />
    <div class="width-fill height-fill flex-fillRemaining">
      <ViewChartLine :mark-line="[]" :option="lineOption" :dataset="lineDataset" :is-area-shadow="true" />
    </div>
  </div>
</template>
